<template>
  <div class="five px-2">
    <div class="flex">
      <div class="item">
        <div class="flex align-center mt-2 mb-4">
          <i class="mr-1"></i>
          <p class="colorfff">预警情况</p>
        </div>
        <div class="itembg ml-1 flex align-center justify-between">
          <div class="font14 colorccc">预警数量</div>
          <div class="text-main font16">69个</div>
        </div>
      </div>
      <div class="flex-1">
        <div class="flex align-center mt-2">
          <i class="mr-1"></i>
          <p class="colorfff">预警情况</p>
        </div>
        <div class="flex align-center mt-1">
          <div class="flex align-center justify-center probox">
            <Progress strokeColor="#00E3FF" 
              :strokeWidth="getRealPX(6)" value="16.88"  :radius="getRealPX(38)">
              <template v-slot:footer>
                <b class="colorccc">预警量</b>
              </template>
            </Progress>
          </div>
          <div class="flex align-center justify-center probox">
            <Progress strokeColor="#EF4882" 
              :strokeWidth="getRealPX(6)" value="16.88" :radius="getRealPX(38)">
              <template v-slot:footer>
                <b class="colorccc">处理量</b>
              </template>
            </Progress>
          </div>
        </div>
      </div>
    </div>
    <div class="flex align-center mt-4">
      <i class="mr-1"></i>
      <p class="colorfff">处理情况</p>
    </div>
    <div id="warning-chart01"></div>
  </div>
</template>
<script>
import Progress from "easy-circular-progress";
var echarts = require("echarts");

export default {
  name: "waringFive",
  components: { Progress },

  data() {
    return {};
  },
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      var drawFiveCharts = document.getElementById("warning-chart01"); // 对应地使用ByClassName
      var drawFiveChart = echarts.init(drawFiveCharts);
      var xData = [
          "7/15",
          "7/16",
          "7/17",
          "7/18",
          " 7/19",
          "7/20",
          "77/21",
          "7/22",
          "7/23",
          "7/24",
        ],
        yData1 = [
          122.31,
          75.18,
          115.27,
          208.46,
          214.81,
          477.28,
          296.46,
          329.84,
          240.05,
          222.64,
        ],
        yData2 = [
          -40.53,
          -38.53,
          53.33,
          80.85,
          3.04,
          122.19,
          -37.89,
          11.26,
          11.26,
          -7.25,
        ],
        borderData = [],
        legend = ["处理情况", "同比增长了"],
        colorArr = [
          {
            start: "rgba(4, 205, 244, 1)",
            end: "rgba(67, 144, 250, 0.9)",
          },
          {
            start: "rgba(51, 255, 153, 1)",
            end: "rgba(0, 144, 142, 1)",
          },
          {
            color: "#EF4864",
          },
        ];
      // var sideData = yData1.map(item => item + 4.5);
      var normalColor = "rgba(255,255,255,0.5)";
      //   var fontSize = 20;
      let seriesData = [];

      [yData1, yData2].forEach((item, index) => {
        var obj1 = {};
        var obj2 = {};
        if (index < 1) {
          obj1 = {
            name: legend[index],
            type: "bar",
            stack: legend[index],
            data: item,
            barWidth: "15%",
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: colorArr[index].start + "0.7)",
                    },
                    {
                      offset: 0.5,
                      color: colorArr[index].start + "0.3)",
                    },
                    {
                      offset: 1,
                      color: colorArr[index].end,
                    },
                  ],
                  globalCoord: false,
                },
              },
            },
            // label: {
            //   normal: {
            //     show: true,
            //     position: "top",
            //     textStyle: {
            //       //数值样式
            //       color: "#04CDF4",
            //       fontSize: 12,
            //     },
            //   },
            // },
          };
          seriesData.push(obj1);
        } else {
          var obj3 = {
            name: legend[index],
            type: "line",
            yAxisIndex: 1,
            smooth: false,
            symbol: "circle",
            // symbolSize: 10,
            lineStyle: {
              normal: {
                width: 1,
              },
            },
            itemStyle: {
              normal: {
                color: "#00FDFF",
                borderColor: "#fff",
                borderWidth: 1,
                // areaStyle: {
                //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                //     {
                //       offset: 0,
                //       color: "rgba(255, 140, 140, 0.2)",
                //     },
                //     {
                //       offset: 1,
                //       color: "#FF8C8C",
                //     },
                //   ]),
                // },
              },
            },
            data: item,
            label: {
              normal: {
                show: false,
                position: "top",
                textStyle: {
                  //数值样式
                  color: "#EF4864",
                  fontSize: 12,
                },
              },
            },
          };
          seriesData.push(obj3);
        }
      });
      var option = {
        grid: {
          left: "3%",
          top: "16%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        // legend: {
        //   show: true,
        //   icon: "rect",
        //   itemWidth: 20,
        //   itemHeight: 3,
        //   right: "0%",
        //   top: "0%",
        //   textStyle: {
        //     color: "#65ABE7",
        //   },
        //   data: legend,
        // },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var str = "";
            for (var i = 0; i < params.length; i++) {
              // console.log(params);

              let unit = "";
              let value = 0;
              if (i == 1) {
                if (params[i].value < 0) {
                  unit = "-";
                }
                value =
                  unit +
                  parseInt(params[0].value / (params[i].value / 100 + 1));
                str +=
                  params[i].name +
                  ":" +
                  params[i].seriesName +
                  params[i].value +
                  "%";
              } else {
                value = params[i].value;
                str +=
                  params[i].name +
                  ":" +
                  params[i].seriesName +
                  value +
                  "个" +
                  "<br/>";
              }
            }

            ("<br/>");
            return str;
          },
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#65ABE7",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#65C6E7",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "处理情况",
            nameTextStyle: {
              color: "#65C6E7",
              fontSize: 12,
            },
            // "min": 0,
            // "max": 50,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontSize: 12,
                color: "#65ABE7",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "solid",
                color: "#65C6E7",
              },
            },
          },
          {
            type: "value",
            name: "%",
            nameTextStyle: {
              fontSize: 12,
              color: "#65ABE7",
            },
            min: -100,
            max: 200,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontSize: 12,
                color: "#65ABE7",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "solid",
                color: "#65C6E7",
              },
            },
          },
        ],
        series: seriesData,
      };
      drawFiveChart.setOption(option);
    },
  },
};
</script>
<style lang="stylus" scoped>
#warning-chart01 {
  width: 560px;
  height: 400px;
}

.five {
  width: 608px;
  height: 635px;
  background: url('../../../assets/img/warning/bg04.png') no-repeat;
  background-size: 608px 635px;
}

i {
  width: 4px;
  height: 18px;
  background: #007FFE;
}

.item {
  width: 310px;

  .itembg {
    width: 247px;
    height: 45px;
    background: url('../../../assets/img/warning/icon03.png') no-repeat;
    background-size: 247px 45px;
    padding: 0 15px;
  }
}

.probox {
  width: 50%;
  color: #ffffff;
}
/deep/.vue-circular-progress .percent__int{
  font-size:20px ;
}
/deep/.vue-circular-progress .dot{
  font-size:10px ;
}
/deep/.vue-circular-progress .percent__dec {
  font-size:10px ;
}
/deep/.vue-circular-progress .percent_sign {
  font-size:10px ;
}
</style>
